<template>
  <div class="userPage">
    <el-button type="primary" @click="handleAdd"> 新增用户 </el-button>

    <!-- 用户列表 -->
    <el-table
      :data="
        JSON.parse(JSON.stringify(userList)).filter(
          (el) =>
            !search || el.label.toLowerCase().includes(search.toLowerCase())
        )
      "
      class="elTable"
      row-key="id"
      border
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="id" label="id" align="center" sortable width="70">
        <template #defauilt="{ row }">
          {{ row.id ? row.id : '-' }}
        </template>
      </el-table-column>

      <el-table-column prop="label" label="名称" align="center" sortable>
        <template #defauilt="{ row }">
          {{ row.label ? row.label : '-' }}
        </template>
      </el-table-column>

      <el-table-column prop="account" label="账号" align="center" sortable>
        <template #defauilt="{ row }">
          {{ row.account ? row.account : '-' }}
        </template>
      </el-table-column>

      <el-table-column prop="pass" label="密码" align="center" sortable>
        <template #defauilt="{ row }">
          {{ row.pass ? row.pass : '-' }}
        </template>
      </el-table-column>

      <!-- 日期 -->
      <el-table-column
        prop="dataTime"
        label="建立日期"
        align="center"
        sortable
        min-width="90"
      >
        <template v-slot="{ row }">
          {{
            row.dataTime && row.dataTime != null
              ? row.dataTime
              : '2022-12-15 12:00:00'
          }}
        </template>
      </el-table-column>

      <!-- key标识 -->
      <el-table-column
        prop="key"
        label="key标识"
        align="center"
        sortable
        min-width="90"
      >
        <template v-slot="{ row }">
          {{ row.key && row.key != null ? row.key : 'user1' }}
        </template>
      </el-table-column>

      <!-- 头像 -->
      <!-- <el-table-column prop="avatar" label="头像" align="center" sortable>
        <template slot-scope="scope">
          <el-popover
            class="popovers"
            trigger="hover"
            placement="top"
            width="100"
          >
            <el-image
              style="width: 100%; height: 50px"
              :src="scope.row.avatar"
              :fit="'scale-down'"
            >
            </el-image>

            <el-button type="text" slot="reference">头像</el-button>
          </el-popover>
        </template>
      </el-table-column> -->

      <!-- userId -->
      <el-table-column prop="userId" label="userId" align="center" sortable>
        <template #defauilt="{ row }">
          {{ row.userId ? row.userId : '-' }}
        </template>
      </el-table-column>

      <!-- orgId -->
      <!-- <el-table-column
        prop="orgId"
        label="orgId"
        align="center"
        sortable

      >
        <template #defauilt="{ row }">
          {{ row.orgId ? row.orgId : '-' }}
        </template>
      </el-table-column> -->

      <!-- 操作 -->
      <el-table-column align="center" width="250">
        <template slot="header" slot-scope="scope">
          <el-input
            class="inputs"
            v-model="search"
            size="mini"
            placeholder="输入姓名搜索"
            clearable
            @clear="search = ''"
          >
          </el-input>
        </template>

        <template slot-scope="scope">
          <el-button size="mini" @click="permEdit(scope.$index, scope.row)">
            角色分配
          </el-button>

          <el-button
            size="mini"
            :disabled="
              ['0', '1', '2', '3', '4'].includes(scope.row.id) ? true : false
            "
            @click="handleEdit(scope.$index, scope.row, 'edit')"
          >
            编辑
          </el-button>

          <el-button
            size="mini"
            type="danger"
            :disabled="
              ['0', '1', '2', '3', '4'].includes(scope.row.id) ? true : false
            "
            @click="handleDelete(scope.$index, scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增用户 -->
    <el-dialog
      title="新增用户"
      :before-close="closeUserVisible"
      :visible.sync="userVisible"
      center
      width="600"
    >
      <el-form
        ref="userForme"
        :rules="userRules"
        :model="userForms"
        label-width="80px"
      >
        <el-form-item label="id">
          <el-input v-model.trim="userForms.id" disabled></el-input>
        </el-form-item>

        <el-form-item label="名称">
          <el-input v-model.trim="userForms.label"></el-input>
        </el-form-item>

        <el-form-item label="账号">
          <el-input v-model.trim="userForms.account"></el-input>
        </el-form-item>

        <el-form-item label="密码">
          <el-input v-model.trim="userForms.pass"></el-input>
        </el-form-item>

        <!-- <el-form-item label="图片链接">
          <el-input v-model.trim="userForms.avatar"></el-input>
        </el-form-item> -->

        <el-form-item label="userId">
          <el-input v-model.trim="userForms.userId"></el-input>
        </el-form-item>

        <!-- <el-form-item label="orgId">
          <el-input v-model.trim="userForms.orgId"></el-input>
        </el-form-item> -->
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="closeUserVisible">取 消</el-button>
        <el-button type="primary" @click="onSubmit('userForme')">
          确 定
        </el-button>
      </span>
    </el-dialog>

    <!-- 角色分配 -->
    <el-dialog
      title="角色分配"
      :before-close="closeuserToRoleVisible"
      :visible.sync="userToRoleVisible"
      center
      width="600"
      class="userToRoleVisibles"
    >
      <el-radio-group v-model="defaultrRadio">
        <el-radio :label="e.key" v-for="(e, i) in roleList" :key="i">
          {{ e.label }}
        </el-radio>
      </el-radio-group>

      <span slot="footer" class="dialog-footer">
        <el-button @click="closeuserToRoleVisible">取 消</el-button>
        <el-button type="primary" @click="onSubmits('userForme')">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import loginInfo from '../../login/index'
import roleInfo from '../role/role'

export default {
  name: 'user',
  components: {},
  props: {},
  data() {
    return {
      search: '',
      userVisible: false,
      userForms: {},
      userRules: {},
      flag: false,
      index: '',
      rows: {},
      type: '',

      userToRoleVisible: false,
      defaultrRadio: '',
      i: '',
      rowes: {},
    }
  },
  computed: {
    ...mapState(['user']),

    userList() {
      const lists =
        this.user?.userList?.length > 0 ? this.user.userList : loginInfo
      return lists
    },

    roleList() {
      const lists =
        this.user?.roleList?.length > 0 ? this.user.roleList : roleInfo
      return lists
    },
  },
  watch: {},
  created() {
    // this.radio = this.login.userInfo.key
  },
  mounted() {},
  methods: {
    handleAdd() {
      this.userForms.id = this.userList.length
      this.userForms.label = '姓名' + this.userList.length
      this.userForms.account = 'user' + this.userList.length
      this.userForms.pass = 'user' + this.userList.length + '_123'
      this.userForms.userId = 'user' + this.userList.length + '_123456'
      this.userForms.key = 'user1'
      this.userVisible = true
    },

    closeUserVisible() {
      this.index = ''
      this.rows = {}
      this.type = ''

      this.userVisible = false
    },

    handleEdit(index, row, type) {
      this.index = index
      this.rows = row
      this.type = type

      this.userForms = row
      this.userForms.label = 'edit_' + row.label
      this.userForms.account = 'edit_' + row.account
      this.userForms.pass = 'edit_' + row.pass
      this.userForms.userId = 'edit_' + row.userId
      this.userVisible = true
    },

    handleDelete(index, row) {
      this.userList.splice(index, 1)
      this.$store.commit('setUserList', this.userList)
    },

    onSubmit(formName) {
      if (this.flag) return

      this.flag = true
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const dataTime = new Date().toLocaleString()

          const data = {
            ...this.userForms,
            dataTime,
          }

          if (this.type == 'edit') {
            this.$set(this.userList, this.index, data)

            this.$store.commit('setUserList', this.userList)
          } else {
            const lists =
              this.user?.userList?.length > 0 ? this.user.userList : loginInfo

            const data1 = [...lists, data]

            this.$store.commit('setUserList', data1)
          }
          this.userForms = {}
          this.flag = false
          this.userVisible = false
          this.index = ''
          this.rows = {}
          this.type = ''
        }
      })
    },

    permEdit(index, row) {
      this.i = index
      this.rowes = row

      console.log('row', row)
      this.defaultrRadio = row.key
      this.userToRoleVisible = true
    },

    closeuserToRoleVisible() {
      this.i = ''
      this.rowes = {}
      this.userToRoleVisible = false
    },

    onSubmits() {
      const data = { ...this.rowes, key: this.defaultrRadio }

      console.log('data', data)

      this.$set(this.userList, this.i, data)

      this.$store.commit('setUserList', this.userList)

      this.i = ''
      this.rowes = {}
      this.userToRoleVisible = false
    },
  },
}
</script>

<style scoped lang="scss">
.userPage {
  height: 100%;
  padding: 16px;
  padding-bottom: 32px;
  .el-table {
    width: 100%;
    border-radius: 6px;
    margin-top: 15px;
  }

  .userToRoleVisibles {
    .el-dialog {
      .el-dialog__body {
        .el-radio-group {
          .el-radio:nth-child(n + 7) {
            margin-top: 20px;
          }
        }
      }
    }
  }
}
</style>
